@extends('front.public_layout.layout')


@section('style')
    <link rel="stylesheet" href="{{asset('/front/css/shop.css')}}">
    <link rel="stylesheet" href="{{asset('/front/css/bootstrap4.3.1.min.css')}}">
    <style>

    </style>
@endsection

@section('content')
    <div class="middle-content shop">
        {{--    广告轮播--}}
        <div class="secod-adv">
            <div id="myCarousel" class="carousel inline-block slide" data-ride="carousel">
                <!-- 指示符 -->
                <ul class="carousel-indicators">

                    @foreach($adv_goods as $goodsKey => $goodsVal)
                        @if ($goodsKey < 3)
                            <li data-target="#myCarousel" data-slide-to="{{ $goodsKey }}" class="{{ $goodsKey == 0 ? 'active' : '' }}"></li>
                        @endif
                    @endforeach
                </ul>

                <!-- 轮播图片 -->
                <div class="carousel-inner">
                    @foreach($adv_goods as $goodsKey => $goodsVal)
                        @if ($goodsKey < 3)
                        <div class="carousel-item {{ $goodsKey == 0 ? 'active' : '' }}">
                            <a href="{{ url('shop/details/'.$goodsVal->id) }}">
                                <img src="{{ $goodsVal->goods_img_url }}" alt="">
                                <div>{{ $goodsVal->goods_name }}</div>
                            </a>
                        </div>
                        @endif
                    @endforeach

                </div>

                <!-- 左右切换按钮 -->
                <a class="carousel-control-prev" href="#myCarousel" data-slide="prev">
                    <img src="{{ url('/front/img/icon/lunbo_left.png') }}" alt="">
                </a>
                <a class="carousel-control-next" href="#myCarousel" data-slide="next">
                    <img src="{{ url('/front/img/icon/lunbo_right.png') }}" alt="">
                </a>
            </div>

            <div class="hot-list">
                <div class="hot-title">今日推荐 <span>HOT</span></div>
                @foreach($adv_goods as $goodsKey => $goodsVal)
                    <a class="adv-item" href="{{ url('shop/details/'.$goodsVal->id) }}">{{ $goodsVal->goods_name }}</a>
                @endforeach
            </div>
        </div>

        {{--    广告banner--}}
        @if ($banner_adv)
            <a class="index-adv" href="{{ $banner_adv->pc_url }}">
                <img src="{{ $banner_adv->adv_img_pc_url }}" alt="">
            </a>
        @endif

        {{--   商品列表--}}
        <div class="goods-data">
            <div class="title">市场</div>
            <div class="goods-lists">
                <div class="more-btn clear" onclick="get_lists()">查看更多</div>
            </div>
            {!! csrf_field() !!}
        </div>

    </div>

@endsection


@section('js')

    <script src="{{asset('front/js/bootstrap4.3.1.min.js')}}"></script>
    <script>
        $('.carousel').carousel({
            interval: 5000,
            pause: '',
            wrap:true
        })

        var list_url = '{{ url('shop/ajax_list') }}';
        function get_lists() {
            $.post(list_url, {
                _token: '{{ csrf_token() }}'
            }, function (data) {
                if (data.status == 1) {
                    if (data.data.next_page_url) {
                        list_url = data.data.next_page_url;
                    } else {
                        $('.more-btn').hide();
                    }

                    var html = '';
                    $.each(data.data.data,function(index,item){
                        html += '<a class="goods-item" href="'+'{{url('shop/details')}}'+'/'+item.id+'">';
                        html += '   <div class="goods-img"><img src="'+item.goods_img_url+'" alt=""></div>';
                        html += '   <div class="goods-name">'+item.goods_name+'</div>';
                        html += '   <div class="price">'+item.acticity_price+'</div>';
                        html += '   <div class="call-btn">联系</div>';
                        html += '</a>';
                    });

                    $('.more-btn').before(html);

                } else {

                }
            }, 'json');
        }
        get_lists();

    </script>
@endsection